'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { Upload,message, Icon } from 'antd';
const Dragger = Upload.Dragger;
import { Row, Col } from 'antd';
import BottomPic from '../../../../components/tcp/BottomPic.jsx';
import PhonePreview from './PhonePreview.jsx';
import Api from '../../../../config/api';
import Request from '../../utils/request';
import { setRow,setDetail } from '../../reducers/page/actions';
import { setLoading } from '../../reducers/common/actions';

class ComponentBox extends Component {
    constructor(props) {
        super(props);
        this.keyIndex = this.props.keyIndex;
    }
    render() {
        const props = {
            name: 'file',
            showUploadList: false,
            headers: {
                Authorization: Request.getSession(),
            },
            beforeUpload:()=>{
                this.props.setLoading(true);
            },
            onChange:(info)=> {
                console.log(info.file)
                if (info.file.status === 'done') {
                    message.success(`${info.file.name} 上传成功。`);
                    let {url} = info.file.response;
                    this.changePic(url);
                    this.props.setLoading(false);
                } else if (info.file.status === 'error') {
                    this.props.setLoading(false);
                    message.error(`${info.file.name} 上传失败。`);
                }
            },
            action: Api.adminUpload,
            multiple:false
        };

        let data  = this.props.detail.items[this.props.curTabKey];

        return (
            <Row gutter={16}>
                <Col span={10}>
                    <Dragger {...props}>
                        <p className="ant-upload-drag-icon">
                            <Icon type="inbox" />
                        </p>
                        <p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
                        <p className="ant-upload-hint">支持png/jpg格式,图片在不失真的情况下尽量压缩</p>
                    </Dragger>
                </Col>
                <Col span={14}>
                    <PhonePreview>
                        <BottomPic data={data}/>
                    </PhonePreview>
                </Col>
            </Row>
        );
    }
    changePic(url){
        let { detail } = this.props;
        detail = detail.setIn(["items",this.props.curTabKey,"state","url"], url);
        this.props.setDetail(detail);
    }
}

export default connect(
    state =>{
        return {
            row:state.page.row,
            detail:state.page.detail,
            curTabKey:state.page.curTabKey,
        }
    },
    dispatch =>{
        return {
            setRow: (row)=>dispatch(setRow(row)),
            setDetail: (row)=>dispatch(setDetail(row)),
            setLoading: (isLoading)=>dispatch(setLoading(isLoading))
        };
    }
)(ComponentBox);

